import React, { Component } from 'react'

export default class App extends Component {
    state={
        list:[
            {id:1,text:"111"},
            {id:2,text:"222"},
            {id:3,text:"333"},
            {id:4,text:"444"}
        ]
    }
  render() {
    // 抽离使用变量
    // 为了列表的重复和重排，设置key值，提高性能
    var newlist= this.state.list.map(item=><li key={item.id}>{item.text}</li>)
    return (
      <div>
        <h3>循环渲染</h3>
        {/* 使用map来循环，(它替代（vue）v-for 循环渲染)*/}
        <ul>
            {
            // this.state.list.map(item=><li key={item.id}>{item.text}</li>)
            newlist
            }
        </ul>
      </div>
    )
  }
}
